<template>
	<!--pages/search-page/search-page.wxml-->
	<view class="search-page-wrapper">
		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="select-theme" @tap="changeShopOrProd">
				<view class="select">
					<text>{{selectItem == 0? i18n.shop : i18n.commodity}}</text>
					<image src="/static/images/icon/switch.png" class="arrow"></image>
				</view>
			</view>
			<view class="search-box">
				<input :placeholder="i18n.enterKeywordSearch" class="sear-input" confirm-type="search"
					@confirm="toSearchProdPage" @input="getSearchContent" :value="searchKey"></input>
				<image src="/static/images/icon/search.png" class="search-img"></image>
			</view>
			<text class="search-hint" @tap="goBackIndex">{{i18n.cancel}}</text>
		</view>

		<view class="search-display">
			<!-- 热门搜索 -->
			<view class="hot-search">
				<view class="title-text">{{i18n.popularSearches}}</view>
				<view class="hot-search-tags">
					<block v-if="selectItem == 1 && hotProdSearchList.length">
						<block v-for="(item, index) in hotProdSearchList" :key="index">
							<text class="tags" @tap="onHistSearch" :data-name="item.content">{{item.title}}</text>
						</block>
					</block>
					<block v-if="selectItem == 0 && hotShopSearchList.length">
						<block v-for="(item, index) in hotShopSearchList" :key="index">
							<text class="tags" @tap="onHistSearch" :data-name="item.shopName">{{item.shopName}}</text>
						</block>
					</block>
				</view>

			</view>

			<!-- 搜索历史 -->
			<view class="history-search">
				<view class="title-text history-line">{{i18n.searchHistory}}
					<view class="clear-history">
						<image src="/static/images/icon/clear-his.png" @tap="clearSearch"></image>
					</view>
				</view>
				<!-- 商品 -->
				<block v-if="recentProdSearch && recentProdSearch.length > 0">
					<block v-for="(item, index) in recentProdSearch" :key="index">
						<view class="his-search-tags" v-if="selectItem == 1">
							<text class="tags" @tap="onHistSearch" :data-name="item">{{item}}</text>
						</view>
					</block>
				</block>
				<!-- 店铺 -->
				<block v-if="recentShopSearch && recentShopSearch.length > 0">
					<block v-for="(item, index) in recentShopSearch" :key="index">
						<view class="his-search-tags" v-if="selectItem == 0">
							<text class="tags" @tap="onHistSearch" :data-name="item">{{item}}</text>
						</view>
					</block>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/search-page/search-page.js
	var http = require("../../utils/http.js");

	export default {
		data() {
			return {
				hotProdSearchList: [], // 商品热搜
				hotShopSearchList: [], // 店铺
				searchKey: "", // 搜索关键字
				recentShopSearch: [], // 店铺搜索历史
				recentProdSearch: [], // 商品搜索历史
				selectItem: 1, // 选择搜索店铺或者搜索商品 0店铺 1商品
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// 加载导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.search
			});
			// 商品热搜
			this.prodHotSearch()
			//店铺热搜
			this.shopHotSearch()
			// 获取搜索历史
			this.getRecentSearch();
		},
		methods: {
			/**
			 * 改变选择店铺搜索或者商品搜索
			 */
			changeShopOrProd: function() {
				// 选择搜索店铺或者搜索商品 0店铺 1商品
				this.selectItem == 0 ? this.selectItem = 1 : this.selectItem = 0
			},

			/**
			 * 商品热搜
			 */
			prodHotSearch: function() {
				var params = {
					url: '/search/hotSearch',
					method: "GET",
					data: {
						number: 10,
						sort: 1,
					},
					callBack: (res) => {
						this.hotProdSearchList = res
					}
				};
				http.request(params); // 获取历史搜索
			},
			//店铺热搜
			shopHotSearch: function() {
				var params = {
					url: '/shop/hotShops',
					method: "GET",
					data: {},
					callBack: (res) => {
						this.hotShopSearchList = res;
					}
				};
				http.request(params); // 获取历史搜索
			},

			/**
			 * 搜索店铺(商品)提交
			 */
			toSearchProdPage: function() {
				// 判断搜索框是否为空
				if (this.searchKey === '' || !this.searchKey.trim()) {
					uni.showToast({
						title: this.i18n.inpKeyWords,
						icon: 'none',
					})
					return
				}
				if (this.selectItem == 0) {
					// 记录最近搜索(搜索历史)
					// 店铺搜索关键字
					let recentShopSearch = uni.getStorageSync('recentShopSearch') || [];
					recentShopSearch = recentShopSearch.filter(item => item !== this.searchKey);
					recentShopSearch.unshift(this.searchKey);
					if (recentShopSearch.length > 10) {
						recentShopSearch.pop();
					}
					// 将历史放到缓存中
					uni.setStorageSync('recentShopSearch', recentShopSearch);
					uni.navigateTo({
						url: '/pages/searchShopShow/searchShopShow?shopName=' + this.searchKey
					});
				} else if (this.selectItem == 1) {
					// 商品搜索关键字
					let recentProdSearch = uni.getStorageSync('recentProdSearch') || [];
					recentProdSearch = recentProdSearch.filter(item => item !== this.searchKey);
					recentProdSearch.unshift(this.searchKey);
					if (recentProdSearch.length > 10) {
						recentProdSearch.pop();
					}
					// 将历史放到缓存中
					uni.setStorageSync('recentProdSearch', recentProdSearch);
					// 跳转到商品(店铺)列表页
					uni.navigateTo({
						url: '/pages/search-prod-show/search-prod-show?prodName=' + this.searchKey
					});
				}
			},

			/**
			 * 获取历史搜索
			 */
			getRecentSearch: function() {
				let recentShopSearch = wx.getStorageSync('recentShopSearch');
				let recentProdSearch = wx.getStorageSync('recentProdSearch');
				this.setData({
					recentShopSearch,
					recentProdSearch
				});
			},

			/**
			 * 清空搜索历史
			 */
			clearSearch: function() {
				if (!this.selectItem) {
					wx.removeStorageSync('recentShopSearch');
				} else {
					wx.removeStorageSync('recentProdSearch');
				}
				this.getRecentSearch();
			},
			// 返回首页
			goBackIndex: function() {
				uni.navigateBack({
					//url: '/pages/search-page/search-page',
				});
			},
			//输入商品名获取数据 || 绑定输入值
			getSearchContent: function(e) {
				this.setData({
					searchKey: e.detail.value
				}); // this.data.searchKey=e.detail.value
			},
			//点击搜素历史
			onHistSearch: function(e) {
				var name = e.currentTarget.dataset.name;
				this.setData({
					searchKey: name
				});
				this.toSearchProdPage();
			}
		}
	};
</script>
<style lang="scss">
	/* 搜索栏 */
	.search-page-wrapper {
		.search-bar {
			display: flex;
			box-sizing: border-box;
			padding: 20rpx;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			color: #777;
			background: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.07);
			z-index: 3;

			.select-theme {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 15%;
				font-size: 28rpx;
				
				.select {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						color: #333;
					}

					image.arrow {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.search-box {
				position: relative;
				width: 65%;
				height: 70rpx;
				margin-left: 20rpx;
				background: #f7f7f7;
				z-index: 999;
				border-radius: 50rpx;


				.sear-input {
					margin: 0 30rpx 0 64rpx;
					height: 70rpx;
					line-height: 48rpx;
					border-radius: 50rpx;
					border: 0;
					vertical-align: top;
					background: #f7f7f7;
					font-size: 28rpx;
				}

				.search-img {
					display: block;
					position: absolute;
					left: 16rpx;
					top: 50%;
					width: 34rpx;
					height: 34rpx;
					transform: translateY(-50%);
				}
			}

			.search-hint {
				position: absolute;
				right: 40rpx;
				top: 50%;
				font-size: 30rpx;
				transform: translateY(-50%);
				color: #e43130;
			}
		}

		/* 热门搜索&搜索历史 */

		.search-display {
			padding: 20rpx;
			margin-top: 100rpx;
			background: #fff;

			.title-text {
				padding: 30rpx 0;
				font-size: 30rpx;
				color: #666;
			}

			.hot-search {
				.hot-search-tags {
					padding-bottom: 30rpx;
					overflow: hidden;
					font-size: 26rpx;
					text-align: left;

					.tags {
						display: inline-block;
						margin-right: 20rpx;
						margin-bottom: 20rpx;
						padding: 14rpx 30rpx;
						max-width: 100%;
						overflow: hidden;
						border-radius: 50rpx;
						white-space: nowrap;
						background-color: #f2f2f2;
						box-sizing: border-box;
						text-overflow: ellipsis;
					}
				}
			}
		}

		/* 搜索历史 */

		.history-search {
			.title-text.history-line {
				position: relative;
				border-top: 2rpx solid #e1e1e1;

				.clear-history image {
					position: absolute;
					right: 10rpx;
					top: 30rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.his-search-tags {
				display: inline-block;
				overflow: hidden;
				font-size: 26rpx;
				text-align: center;
				.tags {
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					padding: 10rpx 30rpx;
					max-width: 300rpx;
					overflow: hidden;
					float: left;
					border-radius: 50rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					background-color: #f2f2f2;
					box-sizing: border-box;
					
				}
			}
		}
	}
</style>
